<template>
	<view>
		<view class="tn-cyan-dark_bg"
			style="display: flex;justify-content: space-between;align-items: center;padding: 10px;">
			<view style="display: flex;align-items: center;">
				<tn-icon name="shop" size="48"></tn-icon>
				<view class="">{{ title }}</view>
			</view>
			<view style="display: flex;align-items: center;" @click="regPlace">
				<tn-icon name="add-circle" size="48"></tn-icon>
				<text>注册店铺</text>
			</view>
		</view>
		<view v-if="showRegPlace" class="ui-all" style="width: 90vw;height: 50vh;padding: 15px;">
			<view class="ui-list" style="border-bottom: 1px solid #888;">
				<text>店铺名称:</text>
				<input type="text" placeholder="请输入店铺名称" :value="regNickName" @input="bindNickName"
					placeholder-class="place" />
			</view>
			<view class="ui-list" style="border-bottom: 1px solid #888;">
				<text>联系电话:</text>
				<input type="text" placeholder="请输入联系电话" :value="regPhone" @input="bindPhone"
					placeholder-class="place" />
			</view>
			<view style="padding: 20px 0;">
				<button class="tn-cyan-dark_bg" @click="regSubmit">注册</button>
			</view>
		</view>
		<scroll-view v-if="!showRegPlace" scroll-y
			style="width: 90vw;height: 50vh;padding: 10px 5px;background-color: #f1f1f1;">
			<tn-empty v-if="placeData.length === 0" mode="list"></tn-empty>
			<tn-list-item v-for="(place, index) in placeData" :key="index" radius :custom-style="{ marginBottom: '5px' }">
				<!-- 				
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<view style="display: flex;align-items: center;gap: 5px;">
						<tn-avatar :url="sConf.pics +'/media/'+ place.logo" size="lg"></tn-avatar>
						<view style="display: flex;flex-direction: column;justify-content: space-between;">
							<view style="display: flex;align-items: center;gap: 5px;">
								<view class="textView" style="font-weight: bold;">{{place.nicename}}</view>
								<tn-bubble-box :options="showBubble" position="right">
									<tn-icon v-if="place.auth" name="safe" color="#0f0" size="32"></tn-icon>
								</tn-bubble-box>
							</view>
							<tn-rate v-model="place.rate" readonly allow-half :min="0" :max="5" size="sm"></tn-rate>
							<view style="color: #888;font-size: smaller;">粉丝 1k | 销量 2456</view>
						</view>
					</view>
					<view>
						<view v-if="place.status===1" class="tn-teal-disabled_bg"
							style="padding: 3px 5px; border-radius: 5px;font-size: smaller;">在线
						</view>
						<view v-else class="tn-grey-disabled_bg"
							style="padding: 3px 5px; border-radius: 5px;font-size: smaller;">离线</view>
					</view>
					<view class="">
						<button class="tn-indigo_bg" style="font-size: small;" @click="navPlace(place.id)">逛一逛</button>
					</view>
				</view> -->
				<sub-shoped-card :place="place" stroll></sub-shoped-card>
			</tn-list-item>
		</scroll-view>
	</view>
</template>

<script>
import utils from '@/common/utils';
export default {
	name: "sub-shoped-list",
	data() {
		return {
			title: '店铺列表',
			sConf: getApp().globalData,
			placeData: [],
			showRegPlace: false,
			regNickName: null,
			regPhone: null,
			showBubble: [{
				text: '企业认证',
				icon: 'safe',
				textColor: '#000'
			}],
		};
	},
	onShow() {
		console.log('onShow');
	},
	methods: {
		loadDefData() {
			this.$nextTick(() => {
				let host = this.sConf.host + '/weapps/placeList/';
				let token = this.sConf.token || '';
				let data = {
					parent: this.sConf.auth.id
				}
				utils.authenticatorOnList(host, token, data).then(res => {
					console.log('查询云店列表', res);
					this.placeData = res;
				});
			})
		},
		/**
		 * 导航到店铺
		 * @param {Number} e 店铺ID
		 */
		navPlace(e) {
			uni.navigateTo({
				url: '/pageb/shoped/shoped?pid=' + e
			})
		},
		/**
		 * 注册云店
		 */
		regPlace() {
			this.showRegPlace = !this.showRegPlace
		},
		/**
		 * 输入名字
		 */
		bindNickName(e) {
			this.regNickName = e.detail.value;
			console.log(this.regNickName);
		},
		/**
		 * 输入电话
		 */
		bindPhone(e) {
			this.regPhone = e.detail.value;
			console.log(this.regPhone);
		},
		/**
		 * 提交注册
		 */
		regSubmit() {
			let data = {}
			if (!this.regNickName) {
				uni.showToast({
					title: '请填写店铺名称',
					icon: 'fail',
					duration: 2000
				});
				return;
			}
			data.nicename = this.regNickName;
			if (this.regPhone !== null && utils.isPoneAvailable(this.regPhone)) {
				data.phone = this.regPhone;
			} else {
				uni.showToast({
					title: '手机号码有误，请重填',
					icon: 'fail',
					duration: 2000
				});
				return;
			}
			// 提交请求
			let host = this.sConf.host + '/weapps/placeList/';
			let token = this.sConf.token || ''
			utils.authenticatorOnPost(host, token, data).then(res => {
				console.log('注册店铺', res);
				this.placeData.push(res);
				this.regNickName = null;
				this.regPhone = null;
				this.showRegPlace = false;
			}).catch(err => {
				uni.showToast({
					icon: 'error',
					title: '注册失败',
					duration: 3000
				});
			});

		}
	}
}
</script>

<style lang="less">
.ui-all {
	padding: 20rpx 40rpx;

	.avatar {
		width: 100%;
		text-align: left;
		padding: 20rpx 0;
		border-bottom: solid 1px #f2f2f2;
		position: relative;

		.imgAvatar {
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
			display: inline-block;
			vertical-align: middle;
			overflow: hidden;

			.iavatar {
				width: 100%;
				height: 100%;
				display: block;
			}
		}

		text {
			display: inline-block;
			vertical-align: middle;
			color: #8e8e93;
			font-size: 28rpx;
			margin-left: 40rpx;
		}

		&:after {
			content: ' ';
			width: 20rpx;
			height: 20rpx;
			border-top: solid 1px #030303;
			border-right: solid 1px #030303;
			transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			/* IE 9 */
			-moz-transform: rotate(45deg);
			/* Firefox */
			-webkit-transform: rotate(45deg);
			/* Safari 和 Chrome */
			-o-transform: rotate(45deg);
			position: absolute;
			top: 85rpx;
			right: 0;
		}
	}

	.ui-list {
		width: 100%;
		text-align: left;
		padding: 20rpx 0;
		border-bottom: solid 1px #f2f2f2;
		position: relative;

		text {
			color: #4a4a4a;
			font-size: 28rpx;
			display: inline-block;
			vertical-align: middle;
			min-width: 150rpx;
		}

		input {
			color: #030303;
			font-size: 30rpx;
			display: inline-block;
			vertical-align: middle;
		}

		button {
			color: #030303;
			font-size: 30rpx;
			display: inline-block;
			vertical-align: middle;
			background: none;
			margin: 0;
			padding: 0;

			&::after {
				display: none;
			}
		}

		picker {
			width: 90%;
			color: #030303;
			font-size: 30rpx;
			display: inline-block;
			vertical-align: middle;
			position: absolute;
			top: 30rpx;
			left: 150rpx;
		}

		textarea {
			color: #030303;
			font-size: 30rpx;
			vertical-align: middle;
			height: 150rpx;
			width: 100%;
			margin-top: 50rpx;
		}

		.place {
			color: #999999;
			font-size: 28rpx;
		}
	}

	.right:after {
		content: ' ';
		width: 20rpx;
		height: 20rpx;
		border-top: solid 1px #030303;
		border-right: solid 1px #030303;
		transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		/* IE 9 */
		-moz-transform: rotate(45deg);
		/* Firefox */
		-webkit-transform: rotate(45deg);
		/* Safari 和 Chrome */
		-o-transform: rotate(45deg);
		position: absolute;
		top: 40rpx;
		right: 0;
	}

	.save {
		background: #030303;
		border: none;
		color: #ffffff;
		margin-top: 40rpx;
		font-size: 28rpx;
	}
}
</style>